<?php 
$content = "
<div style='width:80%; margin: 0 auto; display:inline-block; background-color:white; padding:20px; border-radius:10px; max-height:80vh; overflow-y:scroll;'>
	<div> 
		<img src='assets/logo.png' style='box-shadow:2px 2px 5px rgba(0,0,0,0.5); max-width:50px; ' valign='middle'>
		<span style='display:inline-block; font-weight:light; color:black; font-size:30px; text-shadow:2px 2px 5px rgba(0,0,0,0.5);'>Notebubble</span>
	</div>
	
	<p>Bem-vindo ao Notebubble! Este aplicativo é uma forma simples e rápida de armazenar e organizar suas anotações. Aqui está um guia rápido para ajudá-lo a usar todas as funções:</p>
	
	<h1>Ajuda e Referência</h1>

<div style='text-align: justify !important; text-justify: inter-word; !important'>

	<div class='section'>
		<h2>Categorias</h2>
		<p>As anotações estão agrupadas em categorias. Para criar uma, clique no ícone <b>+</b> na barra lateral.<br>
		<p>Aqui você pode nomear sua categoria e adicionar uma descrição. Você também pode escolher um ícone de imagem e uma cor de fundo para a categoria (isso pode ser alterado posteriormente).</p><p>Além disso, você pode definir uma senha para tornar a categoria privada (opcional).</p>
	</div>
	
	<div class='section'>
		<h2>Anotações</h2>
		<p>As anotações são armazenadas em \"bolhas\" (daí o nome do aplicativo), que você pode criar em poucos passos:<br><br>
		Criar uma anotação é tão rápido quanto clicar na categoria onde deseja criá-la, digitar no espaço na parte inferior e clicar em <b>Enviar</b>. Você também pode pressionar <b>Ctrl+Enter</b> no teclado para enviar a anotação.
		<br><br>
		Criar anotações é tão fácil assim, mas há mais opções ao criar bolhas:
		<br>
		
		<h3>Arquivos Anexos</h3>
		Você pode anexar arquivos e imagens às suas anotações. Basta clicar no ícone de anexo no formulário da parte inferior e selecionar o arquivo que deseja anexar. Alternativamente, você também pode colá-los com Ctrl+V se já estiverem na área de transferência.<br><br>
		<b>Nota sobre as imagens anexadas:</b><br>
		Para economizar espaço no banco de dados, as imagens são compactadas por padrão para um formato mais leve antes de serem adicionadas ao banco de dados. Se desejar manter o arquivo original sem compressão, desative a compressão antes de enviar a imagem clicando no botão de engrenagem <span style='font-weight:bold; font-family:icons; color:#2980B9;'>(  )</span> no formulário de postagem e desmarcando a opção de compactar imagens.
		<h3>Listas de Tarefas</h3>
		<p>Uma bolha pode conter itens de lista de tarefas com caixas de seleção que você pode marcar e desmarcar para acompanhar suas pendências.
Para criar um item de lista de tarefas, basta colocar os caracteres >> no início da linha que você está digitando, assim:</p>
		<p>>> Oranges<br>
		>> Milk<br>
		>> Newspaper</p>
		<h3>Lembretes</h3>
		<p>Você pode configurar um lembrete para uma anotação, e o aplicativo notificará você na data e hora que configurar.<br><br>
		Para configurar o lembrete, clique no ícone de engrenagem no formulário da parte inferior e insira a data e hora desejadas. Você também pode usar o ícone de calendário para selecionar uma data e hora.
		<br><br>O aplicativo mostrará uma notificação pop-up quando for a hora do lembrete.
		</p>	
		
		<h3>Formatação básica de texto</h3>
		<p>Você pode formatar o texto que digitar usando uma sintaxe de marcação limitada. Os modos disponíveis são:</p>
		<table style='display:inline-block;'>
		<tr><td>**texto**</td><td>=></td><td><b>Texto em negrito</b></td></tr>
		<tr><td>*texto*</td><td>=></td><td><i>Texto em itálico</i></td></tr>
		<tr><td>__texto__</td><td>=></td><td><u>Texto sublinhado</u></td></tr>
		</table>
		<br><br>
		Mais opções estarão disponíveis em futuras versões do aplicativo.
	</div>

	<div class='section'>
		<h2>Opções de Anotações</h2>
		<p>Depois de enviar uma anotação, há algumas coisas que você pode fazer com ela. Passe o cursor sobre o ícone <span style='font-weight:bold; font-family:icons; color:#2980B9;'></span> de cada anotação para mostrar os controles. As opções disponíveis são:
		
		<h3>Excluir</h3>
		Exclua a anotação se você não precisar mais dela.
		
		<h3>Editar</h3>
		Você pode alterar o texto, anexos e lembretes da anotação.
		
		<h3>Destacar</h3>
		Se a anotação for importante, você pode clicar aqui para destacá-la e localizá-la mais rapidamente.
		
		<h3>Fixar anotação</h3>
		Se a categoria tiver muitas anotações e você precisar acessar uma com frequência, pode fixá-la para exibir uma notificação de anotação fixada na parte superior da categoria. Ao clicar nesta notificação, você será levado diretamente para a anotação fixada.
	</div>

	<div class='section'>
		<h2>Opções de Categorias</h2>
		Assim como as anotações, as categorias também têm opções que você pode acessar clicando no ícone de menu na parte superior da categoria. As opções disponíveis são:
		
		<h3>Editar</h3>
		Você pode editar o nome, descrição, imagem, fundo e senha da categoria, se houver uma.
		
		<h3>Fixar</h3>
		Assim como as anotações, as categorias também podem ser fixadas. Isso fará com que sejam exibidas na parte superior da lista de categorias para acesso rápido.
		
		<h3>Excluir</h3>
		Se você não precisar mais de uma categoria, pode excluí-la. Isso também excluirá todas as suas anotações e anexos.
	</div>
	
	<div class='section'>
		<h2>Busca</h2>
		
		Se precisar encontrar anotações pelo conteúdo, clique no ícone de busca no menu da categoria. Isso abrirá o formulário de busca, onde você pode digitar o texto que deseja buscar. Ao enviar a busca, o sistema mostrará as anotações que contêm o texto buscado.
	</div>

	<div class='section'>
		<h2>Configurações do Aplicativo</h2>
		
		Clicando no ícone de engrenagem <span style='font-weight:bold; font-family:icons; color:#2980B9;'>()</span> no menu da barra lateral, você acessará a página de configurações. As configurações disponíveis são:
		
		<h3>Idioma e Fuso Horário</h3>
		Aqui você pode alterar o idioma do aplicativo e seu fuso horário. Se a hora e data do aplicativo estiverem incorretas, escolha a cidade mais próxima de você. Depois, clique no botão para salvar as alterações.
		
		<h3>Gerenciamento do Banco de Dados</h3>
		Normalmente você não precisa alterar essas configurações, mas se quiser colocar o banco de dados em outro lugar do seu computador (por exemplo, em uma pasta de armazenamento em nuvem), pode configurá-lo aqui. Observe, no entanto, que alterar essa configuração fixará a localização do banco de dados no local específico configurado. Se quiser manter o banco de dados portátil, não altere esses valores.
		
		<h3>Notas sobre a configuração:</h3>
		Excluir a pasta \"notebubble\" redefine o aplicativo, incluindo suas anotações e configurações. Para manter tudo portátil, certifique-se de que a pasta permaneça junto com o executável do aplicativo.
	</div>
	</div>
</div>";

echo renderPage($content);

